import React, { useEffect, useState } from "react"
import LotteryBall from '../../../components/LotteryBall'
import { getFourNumbers4SevenStar, getWinningResult4SevenStar } from '../../../data/sevenStarUtil'

const LotteryItem4SevenStar = (props) => {
  const { item } = props

  const winningResult = getWinningResult4SevenStar(item)
  const lineColor = winningResult ? 'green' : 'gray'

  return (
    <div className='lottery-item'>
      <div>
        {/* <div className='peroid-num'>第{item.lotteryDrawNum}期</div> */}
        <div className='peroid-date'>{item.lotteryDrawTime}</div>
      </div>
      <div>
        <div className='ball-wrapper'>
          {getFourNumbers4SevenStar(item.lotteryDrawResult).map((ball, index) => <LotteryBall key={`ball_${index}`} color={lineColor}>{ball}</LotteryBall>)}
        </div>
      </div>
    </div>
  )
}

export default LotteryItem4SevenStar